<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<f:view>
	<ui:composition template="../template/template.xhtml">
		<ui:define name="titel">
			Löschen
		</ui:define>
		<ui:define name="content">
			<script type="text/javascript">
				$(document).ready(function() {
					$(".image-container").toggle(function() {
						$(this).children(".image-overlay").css("visibility", "visible");
						eval("imageSelect" + $(this).attr("id")+ "()");
						imageSelect();
					}, function() {
						$(this).children(".image-overlay").css("visibility", "hidden");
						eval("imageSelect" + $(this).attr("id")+ "()");
						imageSelect();
					});
				});
			</script>
			<h:form id="mainForm">
				<p:growl id="growl" showDetail="true" life="3000" />
				#{loeschController.getAllAlben()}
				<ui:repeat var="sAlbum" value="#{loeschBean.selectableAlben}">
					<p:panel header="#{sAlbum.name}" toggleable="true"
						toggleSpeed="500" collapsed="true">
						<h:panelGrid columns="5">
							<ui:repeat var="selectableBild"
								value="#{sAlbum.selectableBilder}">
								<div id="#{selectableBild.id}" class="image-container">
									<p:graphicImage
										value="image/thumb/#{selectableBild.id}/#{selectableBild.fullName}"
										width="150" height="150" styleClass="delete-image" />
									<div class="image-overlay">
										<p:graphicImage value="resources/img/select.png"
											styleClass="select-img" />
									</div>
								</div>
								<p:remoteCommand name="imageSelect#{selectableBild.id}">
									<f:setPropertyActionListener target="#{selectableBild.selected}" 
										value="#{!selectableBild.selected}" />
								</p:remoteCommand>
								
							</ui:repeat>
						</h:panelGrid>
					</p:panel>
				</ui:repeat>


				<p:commandLink update=":mainForm:display"
					onclick="loeschenDlg.show()">
					<h:graphicImage id="delete" value="resources/img/trash.png"
						style="position:fixed; top:50%; right:50px; 
					width:100px; height:100px; border:none;"
						alt="Mülleimer" />
				</p:commandLink>

				<p:dialog id="LoeschenDialog" header="Löschen"
					widgetVar="loeschenDlg" visible="false" modal="true"
					resizable="false" dynamic="true" draggable="false" width="580" height="500">
					<div style="height:450px; overflow: inherit;">
						<h:panelGrid id="display" columns="5">
							<ui:repeat value="#{loeschController.selectedBilder}"
								var="bild">
								<p:graphicImage value="image/thumb/#{bild.id}/#{bild.fullName}"
									alt="#{bild.name}" width="100" height="100" style="margin:2px" />
							</ui:repeat>
						</h:panelGrid>
					</div>
					<br />
					<p:commandButton value="Ja" update=":mainForm"
						actionListener="#{loeschController.deleteBilder()}"
						oncomplete="loeschenDlg.hide()" />
				</p:dialog>
			</h:form>
		</ui:define>
	</ui:composition>
</f:view>
</html>
